// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

@use "utils/functions";
@use "utils/mixins";
@use "utils/variables";

.file-overlay {
    position: absolute;
    z-index: 13;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: variables.$white;
    font-size: functions.em(20px);
    font-weight: 600;
    pointer-events: none;
    text-align: center;

    .overlay__indent {
        @include mixins.clearfix;
        @include mixins.alpha-property(background-color, variables.$black, 0.75);

        position: relative;
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    &.right-file-overlay {
        font-size: functions.em(18px);

        .overlay__files {
            width: 150px;
        }
    }

    .overlay__circle {
        display: flex;
        width: 300px;
        height: 300px;
        max-height: 100%;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 20px;
        pointer-events: none;

        &.horizontal {
            width: max-content;
            flex-direction: row;

            .overlay__files {
                width: auto;
                height: 96px;
                max-height: 80%;
            }

            span {
                display: flex;
                align-items: center;
            }
        }
    }

    .overlay__files {
        display: block;
        width: 128px;
    }

    .overlay__logo {
        position: absolute;
        bottom: 30px;
        left: 50%;
        width: 100px;
        margin-left: -50px;
        opacity: 0.3;
    }

    .fa {
        display: inline-block;
        margin-right: 8px;
        font-size: 1.1em;
    }
}
